<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul{padding:0; margin:0; list-style:none; display:none;}

</style>
<script type="text/javascript">
	/*
	window.onload=function(){
		oUl=document.getElementById('ul');
		oBtn=document.getElementById('btn');
		oBtn.onclick=function(ev){
			oEvent=window.event || ev;
			oUl.style.display='block';
			oEvent.cancelBubble=true;	
		}
		document.onclick=function(){
			oUl.style.display='none'
		}
	}
	*/
	var btn = null;
	var oUL = null;
	window.onload = function(){
		btn = document.getElementById("btn");
		oUL = document.getElementById("ul");
		btn.onclick = function(evt){
			var ev = evt || event;
			//ev.stopPropagation();  FF的写法
			//ev.cancelBubble = true;   IE的写法
			try {
				ev.cancelBubble = true;
				ev.stopPropagation();
			} catch(e) {}
			
			oUL.style.display = "block";
		}
		document.onclick = function(){
			oUL.style.display = "none";
		}
	}
</script>
</head>

<body>
<input type="button" value="菜单" id="btn" />
<ul id="ul">
	<li>1111</li>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
</ul>
</body>
</html>
